<template>
  <div class="article-list-container">
    <div class="articletop">
      <div class="articletopl">
        <div class="articlenavitem" @click="chosenav(item)" v-for="(item, index) in navlist"
          :class="{ activenav: activenav == item.id }" :key="index">
          {{ item.name }}（{{ item.num }}）
        </div>
      </div>
      <div class="articletopr">
        <div class="articletoprsea">
          <div class="articletoprseal">
            <input placeholder="输入关键词搜索" class="sousuo" type="text">

          </div>
          <div class="seaicon"><img src="../../../assets/images/searicon.png" alt=""></div>

        </div>
        <div class="fabu">
          <div class="fabumain">
            <div class="fabuicon">
              <img src="../../../assets/images/editfabu.png" alt="">
            </div>
            <div class="fabuicontit">
              健康科普创作
            </div>
          </div>
        </div>
      </div>

    </div>
    <div class="article-list">
      <div v-for="article in articles" :key="article.id" class="article-item">
        <div class="article-cover-container">
          <img src="../../../assets/images/wenbanner.png" :alt="article.title" class="article-cover">
        </div>
        <div class="article-info">
          <h3 class="article-title">{{ article.title }}</h3>
          <p class="article-author">作者: {{ article.author }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'kepu',
  data() {
    return {
      activenav: 2,
      navlist: [
        {
          name: "已发布",
          id: 1,
          num: 10
        },
        {
          name: "草稿箱",
          id: 2,
          num: 100
        }
      ],
      articles: [
        {
          id: 1,
          title: 'Vue.js响应式设计原理',
          author: '张三',
          cover: 'https://via.placeholder.com/300x200/4CAF50/FFFFFF?text=Vue'
        },
        {
          id: 2,
          title: 'JavaScript高级编程技巧',
          author: '李四',
          cover: 'https://via.placeholder.com/300x200/2196F3/FFFFFF?text=JS'
        },
        {
          id: 3,
          title: 'CSS布局完全指南',
          author: '王五',
          cover: 'https://via.placeholder.com/300x200/FF9800/FFFFFF?text=CSS'
        },
        {
          id: 4,
          title: 'Web性能优化实践',
          author: '赵六',
          cover: 'https://via.placeholder.com/300x200/9C27B0/FFFFFF?text=Web'
        },
        {
          id: 5,
          title: '前端工程化解决方案',
          author: '钱七',
          cover: 'https://via.placeholder.com/300x200/607D8B/FFFFFF?text=FE'
        },
        {
          id: 6,
          title: '移动端适配最佳实践',
          author: '孙八',
          cover: 'https://via.placeholder.com/300x200/795548/FFFFFF?text=Mobile'
        },
        {
          id: 7,
          title: 'TypeScript入门到精通',
          author: '周九',
          cover: 'https://via.placeholder.com/300x200/3F51B5/FFFFFF?text=TS'
        },
        {
          id: 8,
          title: 'Node.js后端开发',
          author: '吴十',
          cover: 'https://via.placeholder.com/300x200/009688/FFFFFF?text=Node'
        }
      ]
    }
  },
  created() {

  },
  methods: {
    chosenav(item) {
      this.activenav = item.id

    }
  }
}
</script>
<style>
input:focus {
  outline: none;
}

.bg-my-color {
  background-color: #fff;
}
</style>
<style scoped lang="scss">
.article-list-container {
  max-width: 1600px;
  margin: 0 auto;
  // padding: 20px;
}


.articletop {
  width: 99%;
  height: 60px;
  margin: 0 auto;
  border-bottom: 1px solid #E5E6E8;
  display: flex;
  justify-content: space-between;

  .articletopr {
    display: flex;

    .fabu {
      width: 164px;
      height: 37px;
      background: #4DC0D9;
      border-radius: 4px 4px 4px 4px;
      margin-left: 20px;
      margin-top: 11.5px;
      cursor: pointer;

      .fabumain {
        width: 85%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;

        .fabuicon {
          width: 20px;
          height: 20px;
          margin-top: 8.5px;

          img {
            width: 20px;
            height: 20px;
          }
        }

        .fabuicontit {
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 14px;
          color: #FFFFFF;
          line-height: 37px;
        }
      }
    }

    .articletoprsea {
      width: 80%;
      height: 37px;
      background: #F2F3F3;
      border-radius: 4px 4px 4px 4px;
      margin-top: 11.5px;
      display: flex;
      justify-content: space-between;

      .articletoprseal {
        width: 80%;

        .sousuo {
          width: 100%;
          height: 37px;
          border: none;
          background: #F2F3F3;
          border-radius: 4px 4px 4px 4px;
          padding-left: 16px;
        }
      }

      .seaicon {
        width: 20px;
        height: 20px;
        margin-top: 8.5px;
        margin-right: 15px;
        cursor: pointer;

        img {
          width: 20px;
          height: 20px;
        }
      }


    }
  }

  .articletopl {
    display: flex;

    .articlenavitem {
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: 400;
      font-size: 16px;
      color: #666666;
      line-height: 60px;
      margin-right: 20px;
      cursor: pointer;
    }

    .activenav {
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: bold;
      font-size: 16px;
      color: #000000;
      border-bottom: 3px solid #000;
    }
  }
}

h1 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.article-list {
  display: flex;
  flex-wrap: wrap;
  // margin: -10px;
  margin-top: 20px;
  /* 抵消item的margin */
}

.article-item {
  flex: 0 0 calc(25% - 20px);
  /* 默认4个一行 */
  margin: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.article-item:hover {
  transform: translateY(-5px);
}

.article-cover-container {
  position: relative;
  padding-top: 66.66%;
  /* 3:2宽高比 */
  overflow: hidden;
}

.article-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 保证图片不变形 */
}

.article-info {
  padding: 15px;
}

.article-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.article-author {
  margin: 0;
  font-size: 14px;
  color: #666;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .article-item {
    flex: 0 0 calc(33.333% - 20px);
    /* 3个一行 */
  }

  .articletoprsea {
    width: 300px;
  }

  .sousuo {
    width: 250px;
  }
}

@media (max-width: 768px) {
  .article-item {
    flex: 0 0 calc(50% - 20px);
    /* 2个一行 */
  }

  .articletoprsea {
    width: 300px;
  }

  .sousuo {
    width: 250px;
  }
}

@media (max-width: 480px) {
  .article-item {
    flex: 0 0 calc(100% - 20px);
    /* 1个一行 */
  }

  .articletoprsea {
    width: 300px;
  }

  .sousuo {
    width: 250px;
  }
}
</style>